<template>
  <div class="dynamic-table">
    <MyForm @form-submit="getFormData"></MyForm>
    <div class="table-box">
      <el-table :data="data.tableData" height="500" style="width: 100%">
        <el-table-column label="头像" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.head"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="英雄名称" width="180" />
        <el-table-column prop="nickname" label="英雄称号" width="180" />
        <el-table-column label="定位">
          <template #default="scope">
            <el-tag
              class="tag"
              v-for="(item, index) in scope.row.orientation"
              :key="index"
              >{{ item }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import MyForm from "./MyForm.vue";
import { reactive } from "vue";
import { onMounted } from "vue";
import heroList from "../../data/hero";

onMounted(() => {
  data.tableData = heroList;
});

const data = reactive({
  tableData: [],
});

const getFormData = (form) => {
  filterData(form);
};

const filterData = (form) => {
  data.tableData = heroList.filter((item) => {
    return (
      form.name == item.name ||
      form.title == item.nickname ||
      item.orientation.includes(form.orientation)
    );
  });
};
</script>

<style lang="scss">
.dynamic-table {
  .tag {
    margin-right: 10px;
  }
}
</style>
